<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" th:href="@{/css/pintuer.css}">
<link rel="stylesheet" th:href="@{/css/admin.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<style>
			.cz a{
				border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;
			}
			.cz a:hover{background:#09F; color:#FFF; border-color:#09F; }
</style>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 用户列表</strong></div>
  <div class="padding border-bottom">
      <!--<input type="text" name="title" style="width: 10%" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      <button style="margin-left: 10px" type="button" class="button border-yellow" onclick="window.location.href='#add'"><span class="icon-plus-square-o"></span> 查询</button>-->
      <div class="layui-form-item layui-inline">
          <label class="layui-btn layui-form-label" style="text-align: center" th:onclick="query()" >查询</label>
          <div class="layui-input-block">
              <input class="layui-input" id="username" name="username" placeholder="输入文件名" autocomplete="off"/>
          </div>
      </div>
	  <div class="layui-form-item layui-inline">
		  <label class="layui-btn " style="text-align: center" th:onclick="addUser()" ><i class="layui-icon">&#xe654;</i></label>
	  </div>
  </div>
  </div>

  <table id="coursetable" class="table table-hover text-center">
  	<tr>
	<!--width="5%" -->	<th >ID</th>
  	<!--width="10%"-->	<th >用户名</th>
  	<!--width="10%"-->	<th >昵名</th>
	<!--width="10%"-->	<th >邮箱</th>
  	<!--width="10%"-->	<th >电话</th>
  	<!--width="10%"-->	<th >登录时间</th>
  	<!--width="10%"-->	<th >登录IP</th>
  	<!--width="10%"-->	<th >创建时间</th>
	<!--width="10%"-->	<th >状态</th>
  	<!--width="15%"-->	<th >操作</th>
  	</tr>
	  <tbody >
		  <tr th:each="user:${users.getRecords()}" >
			<td th:text="${user.getUserId()}">ID</td>
			<td th:text="${user.getUserName()}">用户名</td>
			<td th:text="${user.getUserAccount()}">昵名</td>
			<td th:text="${user.getUserEmail()}">邮箱</td>
			<td th:text="${user.getUserIphone()}">电话</td>
			<td th:text="${#dates.format(user.getUpdateTime(),'yyyy-MM-dd HH:mm:ss')}">登录时间</td>
			<td th:text="${user.getIp()}">登录IP</td>
			<td th:text="${#dates.format(user.getCreateTime(),'yyyy-MM-dd HH:mm:ss')}">创建时间</td>
			<td>
				<button class="layui-btn layui-btn-xs" th:if="${user.getStatus()} =='正常'" th:text="${user.getStatus()}"></button>
				<button class="layui-bg-red layui-btn layui-btn-xs" th:if="${user.getStatus()} =='注销'" th:text="${user.getStatus()}"></button>
			</td>
			<td class="cz">
				<a id="bj" th:onclick="'update('+${user.getUserId()}+')'"><i class="layui-icon">&#xe642;</i></a>
				<a th:href="@{/user/delUser/}+${user.getUserId()}"><i class="layui-icon">&#xe640;</i></a>
			</td>
		  </tr>
		  <tr>
			  <td colspan="10">
				  <div class="pagelist">
					  <a id='first_page'  th:onclick="page(4)">首页</a>
					  <a id='last_page'   th:onclick="page(1)">上一页</a>
					  <a id='next_page'   th:onclick="page(2)">下一页</a>
					  <a id='end_page'    th:onclick="page(5)">尾页</a>
					  <a id='jump_page'   th:onclick="page(3)">跳转</a>
					  <input id="page_no" style="height: 20px;width:30px" th:value="${users.getCurrent()}"/>
					  <span th:text="'共'+${users.getTotal()}+'条分'+${users.getPages()}+'页'"></span>
					  <input id="size"  style="height: 20px;width:30px" th:value="${users.getSize()}"/>
					  <a  th:onclick="page(0)">设置</a>
				  </div>
			  </td>
		  </tr>
	  </tbody>
 </table>
</div>

</body>
<script th:src="@{/js/jquery-2.1.0.js}"></script>
<script th:src="@{/js/pintuer.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="javascript">

	function page(x) {
		var  page=[[${users.getCurrent()}]];
		var end_page=[[${users.getPages()}]];
		var downPage = page+1;
		var topPage = page-1;
		var page_no=$("#page_no").val();
		var size=$("#size").val();
		if (x==3&&page_no>=1&&page_no<=end_page){

			window.location.href="/user/data_user?pageNum="+page_no+"&size="+size;
		}
		if (x==0){
			window.location.href="/user/data_user?size="+size;
		}
		if (x==1&&page>1){

			window.location.href="/user/data_user?pageNum="+topPage+"&size="+size;
		}
		if (x==2&&page<end_page){
			window.location.href="/user/data_user?pageNum="+downPage+"&size="+size;
		}
		if (x==4){
			window.location.href="/user/data_user?size="+size;
		}
		if (x==5){
			window.location.href="/user/data_user?pageNum="+end_page+"&size="+size;
		}
	}
	function query() {
		var username=$("#username").val();
		var size=$("#size").val();
		window.location.href="/article/data_article?username="+username+"&size="+size;
	}

	layui.use('layer',function(){
		var layer=layui.layer;
	});

    function update(userId){

        layer.open({
            type: 2,
            area: ['615px', '360px'],
            resize: false,
            shadeClose: true, //点击遮罩关闭
            content: [[@{/user/editUser/}]]+userId
        });
    }
	function addUser(){

		layer.open({
			type: 2,
			area: ['615px', '360px'],
			resize: false,
			shadeClose: true, //点击遮罩关闭
			content: [[@{/user/addUser/}]]
	});
	}
</script>
</html>